<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<div id=app>

    <div id="header" class="text-box">

        <div class="title" th:if="${renewalCompleted}">
            <span class="desc" th:text="|[${datetime}]|" style="margin-right: 10px;"> [2020-06-01 10:00:00] </span>
            契約満了日及び自動更新のお知らせ
            <span class="desc" style="margin-left: 10px;">(Notification of Contract Expiration Date and Automatic Renewal)</span>
        </div>
        <div class="title" th:unless="${renewalCompleted}">
            <span class="desc" th:text="|[${datetime}]|" style="margin-right: 10px;"> [2020-06-01 10:00:00] </span>
            契約自動更新完了のお知らせ
            <span class="desc" style="margin-left: 10px;">(Notification of Automatic Contract Renewal)</span>
        </div>
        <div style="margin: 15px 0;font-size: 20px;">御担当者様</div>

        <div class="text">弊社のクラウドサービスを御利用頂き、誠にありがとうございます。</div>
        <div class="text" th:if="${renewalCompleted}">以下の店舗様の契約更新が完了しましたので、お知らせ致します。</div>
        <div class="text" th:unless="${renewalCompleted}">以下の店舗様の契約満了日が近づいてまいりましたので、お知らせ致します。</div>
    </div>


    <div style="text-align: center;margin: 0 auto;">
        <table style="  border-collapse: collapse;text-align: left;cursor: default;margin-top: 20px;border: 1px solid rgba(127, 255, 255, 0.75);-webkit-box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);-moz-box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);">
            <tbody>
            <tr class="tbTitle">
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">店舗</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">契約開始日</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">契約満了日</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">解約期限日</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">自動更新後の契約満了日</th>
            </tr>
            <tr class="tbContext" th:each="mall,stat : ${malls}">
                <td th:style="'font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);background-color: rgba(' + ${stat.index%2==0?'3, 3, 3, .3':'64, 95, 235, .3'} + ');'" th:text="${mall.store}">Store</td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${mall.startTime}">2017-07-01</td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${mall.endTime}">2022-06-30</td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${mall.terminateTime}">2020-05-31</td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${mall.renewalEndTime}">2023-06-30</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div id="footer" class="text-box" style="margin: 15px auto;padding: 6px 0 6px 0;color: #000;font: 18px 微软雅黑, Arial, Helvetica, sans-serif;">
        <div style="font-size: 17px;color: #111;">契約の御解約は、上記解約期限日までに申請が必要です。</div>
        <div style="font-size: 17px;color: #111;">解約の申請が無い場合、契約期間が一年間、自動で更新されます。</div>
        <div style="font-size: 17px;color: #111;margin: 20px 0;">解約のお手続きはこちらから</div>
        <div style="color: #0000cc;">電話番号：<span>03-3355-1110</span></div>
        <div style="color: #0000cc;">メールアドレス：<span>tk_cloudservice@takachiho-kk.co.jp</span></div>
    </div>
</div>
</body>
</html>